<template>
	<view class="body" :class="{'no-scroll': isMask}">
		<!-- <view v-if="isMask" class="mask" @click="onMask"></view> -->
		<view class="bg">
			<image :src="$IMAGE_BASE_URL2 + '/yangcan/bg.png'" style="width: 100%; height:671rpx;margin: auto; display: block;"></image>
		</view>
		<view class="tongji top">
			<view class="title">数据统计</view>
			<view class="content">
				<view class="week">
					<view class="qk">周完成情况</view>
					<view class="xq">查看详情></view>
				</view>
			</view>
			<view class="xq2">
				<view class="left">
					<view style="border-radius: 26rpx 0 0 26rpx;" class="active">
						<image src='@/img/yangcan/gou.png'
							style="width: 28rpx; height:20rpx;margin: auto; display: block;margin-top: 16rpx;"></image>
					</view>
					<view></view>
					<view style="border-radius:0 26rpx 26rpx 0;"></view>
				</view>
				<view class="right">
					<text style="color: #888888;">2</text>
					<text style="color: #fe7610;">/3</text>
					<image src='@/img/yangcan/jiayou.png'
						style="width: 94rpx; height:52rpx;margin: auto; display: block; margin-left: 16rpx;"></image>
				</view>
			</view>
			<view class="zhinan">
				<image src='@/img/yangcan/zhinan.png'
					style="width: 31rpx; height:31rpx;display: block; margin:0 16rpx;"></image>
				氧护指南：每周规律吸氧 3 次以上，能深层焕活身体细胞 。
			</view>
			<view class="xq2">
				<view class="tj">
					<view class="name">吸氧次数</view>
					<view class="num">2<text class="name">次</text><u-icon name="arrow-downward" color="#fe7610"
							size="22"></u-icon></view>
				</view>
				<view class="tj">
					<view class="name">吸氧时长</view>
					<view class="num">2<text class="name">小时</text></view>
				</view>
				<view class="tj">
					<view class="name">吸氧次数</view>
					<view class="num">3<text class="name">次</text></view>
				</view>
			</view>
		</view>
		<view class="situation">
			<view class="title">月完成情况</view>
			<view style="display: flex; background-color:#fff5ea;border-radius: 15rpx;margin-bottom: 20rpx;">
				<view style="width: 40%;text-align: center;padding: 10rpx;">
					<view class="name">吸氧次数</view>
					<view class="lable">12<text class="name">次</text></view>
				</view>
				<view style="width: 60%;text-align: center;padding: 10rpx;">
					<view class="name">吸氧时长</view>
					<view class="lable">6<text class="name">小时</text>30<text class="name">分</text></view>
				</view>
			</view>
			<view class="title">年度完成情况</view>
			<view style="display: flex; background-color:#fff5ea;border-radius: 15rpx;margin-bottom: 20rpx;">
				<view style="width: 40%;text-align: center;padding: 10rpx;">
					<view class="name">吸氧次数</view>
					<view class="lable">12<text class="name">次</text></view>
				</view>
				<view style="width: 60%;text-align: center;padding: 10rpx;">
					<view class="name">吸氧时长</view>
					<view class="lable">6<text class="name">小时</text>30<text class="name">分</text></view>
				</view>
			</view>
			<view class="title">平均值</view>
			<view style="display: flex; background-color:#fff5ea;border-radius: 15rpx;margin-bottom: 20rpx;">
				<view style="width: 40%;text-align: center;padding: 10rpx;">
					<view class="name">平均每周次数</view>
					<view class="lable">12<text class="name">次</text></view>
				</view>
				<view style="width: 60%;text-align: center;padding: 10rpx;">
					<view class="name">平均每月次数</view>
					<view class="lable">6<text class="name">次</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>
<style lang="scss">
	.situation{
		background-color: #ffffff;
		border-radius: 15rpx;
		padding: 30rpx;
		font-weight: bold;
		.title{
			font-size: 24rpx;
			line-height: 50rpx;
		}
		.name{
			font-size: 24rpx;
			color: #848484;
			line-height: 48rpx;
			padding: 0 10rpx;
		}
		.lable{
			font-size: 60rpx;
		}
	}
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.top{
		position: relative;
		z-index: 99;
	}
	.body {
		padding: 110rpx 28rpx 0;
		color: #040303;
		background-color: #f6f2e7;
	}
	
	.no-scroll {
		position: fixed;
		width: 100%;
		height: 100vh;
		/* 设置为视口高度 */
		overflow: hidden;
	}
	
	.mask {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99;
	}
	.tongji{
		border-radius: 20rpx;
		position: relative;
		z-index: 99;
		margin-top: 15rpx;
		background-color: #fffdf9;
		overflow: hidden;
		.week{
			display: flex;
			line-height: 52rpx;
			padding: 0 20rpx;
			margin: 14rpx 0;
			.qk{
				color: #292626;
				font-size: 30rpx;
			}
			.xq{
				background-color: #fdead6;
				font-size: 24rpx;
				color: #fe710e;
				text-align: center;
				width: 150rpx;
				border-radius: 26rpx;
				margin-left: auto;
			}
			
		}
		.xq2{
			display: flex;
			margin: 20rpx;
			.tj{
				text-align: center;
				width: 33.3%;
				background-color: #f5f5f7;
				padding: 20rpx;
				.name{
					font-size: 22rpx;
					color: #7b7b7b;
					line-height: 22rpx;
				}
				.num{
					font-size: 60rpx;
					line-height: 80rpx;
				}
			}
			.left{
				width: 75%;
				display: flex;
				view{
					background-color: #efe5da;
					width: 32%;
					margin: auto;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
				}
				.active{
					background-color: #fe7610;
				}
			}
			.right{
				width: 25%;
				padding-left: 20rpx;
				display: flex;
				font-size: 32rpx;
					line-height: 52rpx;
					height: 52rpx;
					font-weight: bold;
			}
		}
		
		.zhinan{
			    display: flex;
			    font-size: 20rpx;
			    font-weight: bold;
			    line-height: 31rpx;
			    margin: 20rpx 0;
			    color: #7b7b7b;
		}
		.title{
			background: linear-gradient(18deg, #ff8f1b, #ff6400);
			line-height: 80rpx;
			font-weight: bold;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
			border-radius: 20rpx 20rpx 0 0;
		}
	}
	
</style>